<template>
  <div class="home-nav">
    <div>
            <img src="@/assets/logo.png"  style="width: 80px;height: 55px;">
        </div>
    <div class="home-title">星晖启航线上平台</div>
    <div class="home-bar">
      <div class="home-bar-element" @click="Router.homePage" :style="{ 'color': Router.home ? '#bfdbfe' : 'black' }">首页
      </div>
      <div class="home-bar-element" @click="Router.purchasePage"
            :style="{ 'color': Router.purchase ? '#bfdbfe' : 'black' }" >商城</div>
            <div class="home-bar-element"  @click="Router.dataPage"
                :style="{ 'color': Router.data ? '#bfdbfe' : 'black' }" >个人中心</div>
      <div class="home-bar-element" @click="Router.uploadPage"
        :style="{ 'color': Router.upload ? '#bfdbfe' : 'black' }">上传课程</div>
      <div class="home-bar-element" @click="Router.openLogin">登录</div>
      <div class="home-bar-element" @click="Router.openSign">注册</div>
    </div>
  </div>

 
  <div v-if="Router.showSign === true" class="popup" >
        <div class="popup-content">
            <div @click="Router.closeSign" style="margin-left: 95%;background: gray;">×</div>
            <iframe src="../login" width="400px" height="360px"> </iframe>
        </div>
    </div>

  <div v-if="Router.showLogin === true" class="popup">
        <div class="popup-content">
            <div @click="Router.closeLogin" style="margin-left: 95%;background: gray;">×</div>
            <iframe src="../login" width="400px" height="360px"> </iframe>
        </div>
    </div>
  <div class="body">
    <div class="div-border">
      <div class="upload-file">
        <input type="file" >
        <div>
          <div class="input-box">
            <div style="display: flex;margin-top: 20px;font-size: 14px;">
              课程名字:
              <input v-model="information.name" class="input-class"
                @keyup="information.updateCourseName(information.name)">
            </div>
            <div style="display: flex;margin-top: 20px;font-size: 14px;">作者:
              <input v-model="information.author" class="input-class"
                @keyup="information.updateCourseAuthor(information.author)">
            </div>
            <div style="display: flex;margin-top: 20px;font-size: 14px;">
              教授年级:
              <input v-model="information.grade" class="input-class"
                @keyup="information.updateCourseGrade(information.grade)">
            </div>
           <div class="pay">
            <label>收费方式：
              <input type="radio" value="免费" v-model="information.selectedOption">
              免费
            </label>
            <label>
              <input type="radio" value="会员" v-model="information.selectedOption">
              会员
            </label>
          </div>
          <div class="states">
            <label>难易程度：
              <input type="radio" value="基础" v-model="information.stutes">
              基础
            </label>
            <label>
              <input type="radio" value="进阶" v-model="information.stutes">
              进阶
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="input-in">
    <div style="left: 80px;position: absolute;margin-top: 20px;">课程介绍: </div>
    <textarea v-model="information.context" class="multiline-input"
      @keyup="information.updateCourseContext(information.context)"></textarea>
    <button class="sendRequest" @click="information.addCourse(name, author, grade, context)">提交</button>
  </div>
  </div>
</template>
<script setup>
import router from '@/router/index';
import { RouterData } from '../home/home';
import { messageData } from './upload';
const { Router } = RouterData();
const { information, name, author, grade, context } = messageData();
</script>
<style scoped>
@import './upload.scss'
</style>